// 滚动进度条
window.onscroll = function() {
    let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let scrolled = (winScroll / height) * 100;
    document.getElementById("progressBar").style.width = scrolled + "%";
};

// 导航菜单滚动效果
window.addEventListener('scroll', function() {
    const nav = document.getElementById('mainNav');
    if (window.scrollY > 50) {
        nav.classList.add('py-2');
        nav.classList.remove('py-3');
    } else {
        nav.classList.add('py-3');
        nav.classList.remove('py-2');
    }
});

// 移动端菜单
document.getElementById('mobileMenuBtn').addEventListener('click', function() {
    const mobileMenu = document.getElementById('mobileMenu');
    mobileMenu.classList.toggle('hidden');
});

// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
        // 关闭移动端菜单
        document.getElementById('mobileMenu').classList.add('hidden');
    });
});

// 同工同酬时间轴动画
const equalPayTimeline = document.getElementById('equalPayTimeline');
const observerOptions = {
    threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            setTimeout(() => {
                equalPayTimeline.style.width = '100%';
            }, 500);
            observer.unobserve(entry.target);
        }
    });
}, observerOptions);

if (equalPayTimeline) {
    observer.observe(equalPayTimeline);
}

// 数据可视化图表
window.addEventListener('load', function() {
    // 女性就业率图表
    const employmentCtx = document.getElementById('employmentChart');
    if (employmentCtx) {
        new Chart(employmentCtx, {
            type: 'line',
            data: {
                labels: ['1950', '1960', '1970', '1980', '1990'],
                datasets: [{
                    label: '女性就业率(%)',
                    data: [20, 35, 50, 65, 72],
                    borderColor: '#c53030',
                    backgroundColor: 'rgba(197, 48, 48, 0.1)',
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
    }

    // 女性参政情况图表
    const politicalCtx = document.getElementById('politicalChart');
    if (politicalCtx) {
        new Chart(politicalCtx, {
            type: 'bar',
            data: {
                labels: ['1954', '1964', '1975', '1985', '1995'],
                datasets: [{
                    label: '人大代表中女性比例(%)',
                    data: [12, 22, 27, 21, 24],
                    backgroundColor: 'rgba(180, 83, 9, 0.7)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 50
                    }
                }
            }
        });
    }
});

// 模态框功能
const modal = document.getElementById('modal');
const modalBackdrop = document.getElementById('modalBackdrop');
const closeModalBtn = document.getElementById('closeModalBtn');
const modalTitle = document.getElementById('modalTitle');
const modalBody = document.getElementById('modalBody');

function openModal(title, content) {
    modalTitle.textContent = title;
    modalBody.innerHTML = content;
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    modal.classList.add('hidden');
    document.body.style.overflow = '';
}

closeModalBtn.addEventListener('click', closeModal);
modalBackdrop.addEventListener('click', closeModal);

// 故事按钮点击事件
document.querySelectorAll('.story-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const storyType = this.getAttribute('data-story');
        let title, content;
        
        if (storyType === '奶娘') {
            title = '太行奶娘的感人故事';
            content = `
                <div class="space-y-4">
                    <img src="https://picsum.photos/id/21/800/500" alt="太行奶娘" class="w-full h-auto rounded-lg">
                    <p>在抗日战争最艰苦的时期，八路军将士奔赴前线，他们的子女无人照料。太行山区的妇女们主动承担起抚养这些革命后代的重任，用自己的乳汁哺育着这些孩子。</p>
                    <p>这些被称为"太行奶娘"的女性，冒着生命危险保护着八路军的后代。她们中有的为了保护孩子而失去了自己的亲人，有的甚至献出了自己的生命。</p>
                    <p>据不完全统计，仅左权县就有100多名妇女担任过"奶娘"，她们用自己的行动诠释了什么是军民鱼水情，什么是母爱的伟大。</p>
                    <div class="bg-primary/5 p-4 rounded-lg">
                        <p class="italic text-dark/80">"我们虽然不知道这些孩子的父母是谁，但我们知道他们是革命的后代，是未来的希望。我们要用生命保护他们，让他们健康成长。" —— 一位太行奶娘的话</p>
                    </div>
                </div>
            `;
        }
        
        openModal(title, content);
    });
});

// 视频按钮点击事件
document.querySelectorAll('.video-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const videoType = this.getAttribute('data-video');
        let title, content;
        
        if (videoType === '剪纸') {
            title = '山西剪纸艺术创作过程';
            content = `
                <div class="space-y-4">
                    <div class="aspect-w-16 aspect-h-9">
                        <img src="https://picsum.photos/id/119/800/450" alt="剪纸艺术" class="w-full h-auto rounded-lg">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="h-20 w-20 rounded-full bg-primary/80 flex items-center justify-center text-white cursor-pointer hover:bg-primary transition-colors duration-300">
                                <i class="fa fa-play text-3xl ml-1"></i>
                            </div>
                        </div>
                    </div>
                    <p>山西剪纸是最古老的汉族民间艺术之一，具有独特的艺术风格和深厚的文化底蕴。剪纸艺人通过一把剪刀和一张纸，创造出各种精美的图案，表达对美好生活的向往。</p>
                    <p>在山西，许多女性从小就学习剪纸技艺，经过多年的实践，成为了非遗传承人。她们不仅继承了传统的剪纸技艺，还不断创新，将现代元素融入到传统艺术中，使山西剪纸焕发出新的活力。</p>
                </div>
            `;
        } else if (videoType === '面塑') {
            title = '山西面塑艺术创作过程';
            content = `
                <div class="space-y-4">
                    <div class="aspect-w-16 aspect-h-9">
                        <img src="https://picsum.photos/id/292/800/450" alt="面塑艺术" class="w-full h-auto rounded-lg">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="h-20 w-20 rounded-full bg-primary/80 flex items-center justify-center text-white cursor-pointer hover:bg-primary transition-colors duration-300">
                                <i class="fa fa-play text-3xl ml-1"></i>
                            </div>
                        </div>
                    </div>
                    <p>山西面塑是一种古老的传统民间艺术，以面粉为主要原料，通过揉、捏、剪、压等手法，制作出各种形象生动的艺术品。面塑作品色彩鲜艳，造型精美，具有很高的艺术价值。</p>
                    <p>在山西农村，每到传统节日，妇女们都会制作各种面塑作品，用来祭祀祖先或馈赠亲友。这些面塑作品不仅是艺术品，也是山西传统文化的重要载体。</p>
                </div>
            `;
        } else if (videoType === '布艺') {
            title = '山西布艺刺绣创作过程';
            content = `
                <div class="space-y-4">
                    <div class="aspect-w-16 aspect-h-9">
                        <img src="https://picsum.photos/id/129/800/450" alt="布艺刺绣" class="w-full h-auto rounded-lg">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="h-20 w-20 rounded-full bg-primary/80 flex items-center justify-center text-white cursor-pointer hover:bg-primary transition-colors duration-300">
                                <i class="fa fa-play text-3xl ml-1"></i>
                            </div>
                        </div>
                    </div>
                    <p>山西布艺刺绣是中国传统民间工艺的重要组成部分，以其精湛的技艺和独特的艺术风格闻名于世。布艺刺绣作品题材广泛，包括人物、花鸟、山水等，色彩鲜艳，图案精美。</p>
                    <p>在山西，许多女性都精通布艺刺绣技艺，她们用自己的双手创造出一件件精美的艺术品，传承着这一古老的民间工艺。如今，山西布艺刺绣已被列入国家级非物质文化遗产名录，得到了更好的保护和传承。</p>
                </div>
            `;
        }
        
        openModal(title, content);
    });
});

// 音频播放功能
const playAudioBtn = document.getElementById('playAudioBtn');
const audioProgress = document.getElementById('audioProgress');
const audioTranscript = document.getElementById('audioTranscript');
let isPlaying = false;
let progressInterval;

if (playAudioBtn) {
    playAudioBtn.addEventListener('click', function() {
        if (isPlaying) {
            // 暂停播放
            playAudioBtn.innerHTML = '<i class="fa fa-play"></i>';
            clearInterval(progressInterval);
        } else {
            // 开始播放
            playAudioBtn.innerHTML = '<i class="fa fa-pause"></i>';
            audioTranscript.classList.remove('hidden');
            
            // 模拟音频进度
            let progress = 0;
            progressInterval = setInterval(() => {
                progress += 1;
                audioProgress.style.width = progress + '%';
                if (progress >= 100) {
                    clearInterval(progressInterval);
                    playAudioBtn.innerHTML = '<i class="fa fa-play"></i>';
                    isPlaying = false;
                }
            }, 100);
        }
        isPlaying = !isPlaying;
    });
}

// 元素淡入动画
const fadeElements = document.querySelectorAll('.animate-fade-in, .animate-slide-in');

const fadeObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
            fadeObserver.unobserve(entry.target);
        }
    });
}, {
    threshold: 0.1
});

fadeElements.forEach(element => {
    element.style.opacity = '0';
    element.style.transform = 'translateY(20px)';
    element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
    fadeObserver.observe(element);
});